<template>
<div class="container">
  <headers :title="title" :refresh="isRefresh" :path="path"></headers>
  <div class="content" id="app-task">
    <div class="list-block media-list no-margin" v-for="task in recievedTask">
      <ul class="bg-color-a9aaad">
        <li class="item-content">
          <div class="color-white" style="width:100%;">
            <div class="item-title-row task-header no-padding-bottom">
              <div class="item-title">任务ID：{{task.id}}</div>
              <div class="item-after color-white">{{formatDate(task.createDateView)}}</div>
            </div>
            <div class="item-title-row task-body no-padding-top">
              <div class="item-title">被投人：{{task.votedName}}</div>
              <div class="item-after">
                <a v-link="{path: '/task_details/' + task.id, replace: true}" class="button button-fill button-info">继续完成</a>
              </div>
            </div>
            <div class="item-title-row task-footer">
              <div class="item-title color-yellow"><i class="icon-kaishizhuan icon-coin"></i>&nbsp;{{task.bowlerGold}}</div>
              <div class="item-after"></div>
            </div>
          </div>
        </li>
      </ul>
    </div>
    <div class="list-block media-list no-margin" v-for="task in jiapiaoTask">
      <ul>
        <li class="item-content">
          <div style="width:100%;">
            <div class="item-title-row task-header">
              <div class="item-title color-light">任务ID：{{task.id}}</div>
              <div class="item-after color-danger"><span class="icon icon-star"></span>&nbsp;置顶</div>
            </div>
            <div class="item-title-row task-body">
              <div class="item-title">任务类型：{{task.voteTypeId | formatTypeName}}</div>
              <div class="item-after">
                <a v-link="{path: '/task_details/' + task.id, replace
                : true}" class="button button-fill button-danger" v-if="task.status == 1 && task.btnStatus == 1">马上抢</a>
                <a class="button button-fill button-light" v-if="task.status == 1 && task.btnStatus == 0">已领取</a>
                <a class="button button-fill button-light" v-if="task.status == 0">已结束</a>
              </div>
            </div>
            <div class="item-title-row task-footer">
              <div class="item-title color-danger"><i class="icon-kaishizhuan icon-coin"></i>&nbsp;{{task.bowlerGold}}</div>
              <div class="item-after"></div>
            </div>
          </div>
        </li>
      </ul>
    </div>
    <div class="list-block media-list no-margin" v-for="task in taskInfo">
      <ul>
        <li class="item-content">
          <div style="width:100%;">
            <div class="item-title-row task-header">
              <div class="item-title color-light">任务ID：{{task.id}}</div>
            </div>
            <div class="item-title-row task-body">
              <div class="item-title">任务类型：{{task.voteTypeId | formatTypeName}}</div>
              <div class="item-after">
                <a v-link="{path: '/task_details/' + task.id, replace
                : true}" class="button button-fill button-danger" v-if="task.status == 1 && task.btnStatus == 1">马上抢</a>
                <a class="button button-fill button-light" v-if="task.status == 1 && task.btnStatus == 0">已领取</a>
                <a class="button button-fill button-light" v-if="task.status == 0">已结束</a>
              </div>
            </div>
            <div class="item-title-row task-footer">
              <div class="item-title color-danger"><i class="icon-kaishizhuan icon-coin"></i>&nbsp;{{task.bowlerGold}}</div>
              <div class="item-after"></div>
            </div>
          </div>
        </li>
      </ul>
    </div>
    <!-- 加载提示符 -->
    <div class="infinite-scroll-preloader" v-show="!isSearch">
      <div class="preloader" v-show="isLoading"></div>
      <div class="preloader-btn" v-if="!isLoading && !isLoaded" @click="doPreload">点击加载更多</div>
      <div class="preloaded" v-if="isLoaded">没有更多内容了</div>
    </div>
  </div>
  <nav class="bar bar-tab">
    <a class="tab-item" v-link="{path: '/home', replace: true}">
      <span class="icon icon2 home-icon"></span>
      <span class="tab-label">首页</span>
    </a>
    <a class="tab-item" v-link="{path: '/xinshoujiaocheng', replace: true}">
      <span class="icon icon2 teach-icon"></span>
      <span class="tab-label">教程</span>
    </a>
    <a class="tab-item" v-link="{path: '/ucenter', replace: true}">
      <span class="icon icon2 ucenter-icon"></span>
      <span class="tab-label">个人中心</span>
    </a>
  </nav>
</div>
</template>

<script>
import $ from 'zepto'
import Headers from '../components/Headers'
import store from '../assets/js/store.min.js'

export default {
  ready () {
    this.findAppVoteTypes()
    this.getRecieved()
    this.getTaskInfo(this.currPage, () => {
      setTimeout(() => {
        if (this.currPage === this.totalPage) {
          this.isLoaded = true
        }
        this.isLoading = false
        // console.log(this.recTask)
      }, 1000)
    })
    $.init()
    // $.alert(this.recTask[0].id)
  },
  data () {
    return {
      title: '开始赚钱',
      path: '/home',
      isRefresh: true,
      customerId: store('customerId') || 0,
      taskInfo: [],
      recievedTask: [],
      jiapiaoTask: [],
      recTask: [],
      voteTypes: [],
      isLoading: true,
      isLoaded: false,
      totalPage: 1,
      currPage: 1
    }
  },
  methods: {
    getTaskInfo (page, callback) {
      this.$http.jsonp('http://www.mayishengcai.com/VoteManager/rest/findAppTasks', {
        params: {
          customerId: this.customerId,
          page: page
        }
      }).then(function (data) {
        let total = data.data.total ? Math.ceil(data.data.total / 5) : 1
        this.$set('totalPage', total)
        data.data.rows.forEach((val) => {
          if (this.isRecieved(val.id)) {
            this.recievedTask.push(val)
          }
          else {
            if (val.addPrice > 0) {
              if (this.jiapiaoTask.length === 0 || val.addPrice <= this.jiapiaoTask[this.jiapiaoTask.length - 1].addPrice) {
                this.jiapiaoTask.push(val)
              }
              else if (val.addPrice > this.jiapiaoTask[0].addPrice) {
                this.jiapiaoTask.unshift(val)
              }
            }
            else {
              this.taskInfo.push(val)
            }
          }
        })
        if (callback) {
          callback()
        }
      })
    },
    findAppVoteTypes () {
      this.$http.jsonp('http://www.mayishengcai.com/VoteManager/rest/findAppVoteTypes')
      .then((data) => {
        this.$set('voteTypes', data.data)
      })
    },
    formatDate (date) {
      return date.substr(0, 10)
    },
    getRecieved () {
      this.$http.jsonp('http://www.mayishengcai.com/VoteManager/rest/findCustomerRequiredTask', {
        params: {
          customerId: this.customerId
        }
      }).then((data) => {
        // console.log(data.data)
        this.recTask = data.data
      })
    },
    isRecieved (taskId) {
      let tasks = this.recTask
      let res = false
      if (tasks) {
        tasks.forEach((val) => {
          if (val.id.toString() === taskId.toString()) {
            res = true
          }
        })
      }
      return res
    },
    doPreload () {
      if (this.isLoading) {
        return false
      }
      if (this.currPage === this.totalPage) {
        return false
      }
      this.isLoading = true
      this.currPage++
      this.getTaskInfo(this.currPage, () => {
        setTimeout(() => {
          if (this.currPage === this.totalPage) {
            this.isLoaded = true
          }
          this.isLoading = false
        }, 1000)
      })
      return false
    }
  },
  filters: {
    formatTypeName (typeid) {
      let typeName = ''
      this.voteTypes.forEach((val, key) => {
        if (val.id === typeid) {
          typeName = val.name
        }
      })
      if (typeName) {
        return typeName
      }
      return '未知类型'
    }
  },
  components: {
    Headers
  }
}
</script>
<style scoped>
.bar:after,.bg-color-a9aaad:before,.bg-color-a9aaad .task-header:after{
  height:0!important;
}
.task-header{
  padding-top:10px;
}
.task-header,.task-body,.task-footer{
  padding-left:15px;
  padding-right:15px;
}
.task-body{
  padding-top:10px
}
.task-footer{
  padding-bottom:9px;
}
.task-body .item-title{
  white-space:normal;
}
.list-block:last-child{
  margin-bottom:58px!important;
}
.icon-kaishizhuan.icon-coin{
  display:inline-block;
  vertical-align:middle;
  background-size:100% auto;
  background-position:center;
  -webkit-font-smoothing:antialiased;
  -webkit-text-stroke-width:.2px;
  width:18px;
  height:18px;
  background-image:url(../assets/images/public/icon-coin.png);
}
.infinite-scroll-preloader{
  margin:10px 10px 65px 10px;
  text-align:center;
}
.infinite-scroll-preloader .preloader{
  width:20px;
  height:20px;
}
.infinite-scroll-preloader .preloader-btn{
  width:200px;
  height:25px;
  line-height: 25px;
  margin:0 auto;
  text-align:center;
  border:1px #d6d6d6 solid;
  border-radius:4px;
  font-size:14px;
}
.infinite-scroll-preloader .preloaded{
  width:200px;
  height:25px;
  line-height: 25px;
  margin:0 auto;
  text-align:center;
  color:#aaa;
  font-size:14px;
}
</style>